<template>
    <div class="stu-container">
        <div class="stu-btns">
            <el-dialog title="添加学生成绩信息" :visible.sync="dialogFormVisible">
                <el-form :model="form">
                    <el-form-item label="学生学号" :label-width="formLabelWidth">
                        <el-input v-model="form.stuId" ></el-input>
                    </el-form-item>
                    <el-form-item label="学生姓名" :label-width="formLabelWidth">
                        <el-input v-model="form.stuName" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="所属班级" style="padding-left: 50px">
                        <el-select v-model="form.belong" placeholder="请选择">
                            <el-option
                                    v-for="(item,i) in options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="性别" style="padding-left: 50px">
                        &nbsp; &nbsp; &nbsp;
                        <el-radio v-model="form.gender" label="男">男</el-radio>
                        <el-radio v-model="form.gender" label="女">女</el-radio>
                    </el-form-item>
                    <el-form-item label="邮箱" style="padding-left: 50px">
                        &nbsp; &nbsp; &nbsp;
                        <el-input v-model="form.email" ></el-input>
                    </el-form-item>
                    <el-form-item label="电话" style="padding-left: 50px">
                        &nbsp; &nbsp; &nbsp;
                        <el-input v-model="form.photo" ></el-input>
                    </el-form-item>
                    <el-form-item label="个人简介" style="padding-left: 50px">
                        <textarea v-model="form.disc" style="width: 400px" ></textarea>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="commitForm(1)">确 定</el-button>
                </div>
            </el-dialog>

            <el-dialog title="修改学生成绩信息" :visible.sync="up_dialogFormVisible">
                <el-form :model="form">
                    <el-form-item label="学生学号" :label-width="formLabelWidth">
                        <el-input v-model="form.stuId" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="学生姓名" :label-width="formLabelWidth">
                        <el-input v-model="form.stuName" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="所属班级" style="padding-left: 50px">
                        <el-select v-model="form.belong" placeholder="请选择">
                            <el-option
                                    v-for="(item,i) in options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="性别" style="padding-left: 50px">
                        &nbsp; &nbsp; &nbsp;
                        <el-radio v-model="form.gender" label="男">男</el-radio>
                        <el-radio v-model="form.gender" label="女">女</el-radio>
                    </el-form-item>
                    <el-form-item label="邮箱" style="padding-left: 50px">
                        &nbsp; &nbsp; &nbsp;
                        <el-input v-model="form.email" ></el-input>
                    </el-form-item>
                    <el-form-item label="电话" style="padding-left: 50px">
                        &nbsp; &nbsp; &nbsp;
                        <el-input v-model="form.photo" ></el-input>
                    </el-form-item>
                    <el-form-item label="个人简介" style="padding-left: 50px">
                        <textarea v-model="form.disc" style="width: 400px" ></textarea>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="up_dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="commitForm(2)">确 定</el-button>
                </div>
            </el-dialog>

            <el-row>
                <div class="op-row">
                    <div class="btns">
                        <el-button type="success" @click="dialogFormVisible = true">&nbsp&nbsp添加&nbsp&nbsp</el-button>
                        <el-button type="warning" :disabled="up" @click="toUpdate">&nbsp&nbsp修改&nbsp&nbsp</el-button>
                        <el-button type="danger" :disabled="del" @click="toDel">&nbsp&nbsp删除&nbsp&nbsp</el-button>
                    </div>
                    <div class="stu-search">
                        <el-input v-model="search" placeholder="输入关键字搜索"/>
                        <el-select
                                v-model="classed"
                                multiple
                                collapse-tags
                                style="margin-left: 20px;"
                                placeholder="请选择">
                            <el-option
                                    v-for="item in options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                        <el-button icon="el-icon-search" circle @click="searchByCondition"></el-button>
                    </div>
                    <div class="ex-in-port">
                        <el-button type="primary" round>导入</el-button>
                        <el-button type="primary" round>导出</el-button>
                    </div>
                </div>
            </el-row>
        </div>
        <el-table

                @row-click="handleRowChange"
                max-height="490"
                ref="multipleTable"
                @selection-change="handleSelectionChange"
                tooltip-effect="dark"
                :data="stuList.filter(data => !search || data.stuName.toLowerCase().includes(search.toLowerCase()))"
                style="width: 100%; cursor:pointer;"
                :row-class-name="tableRowClassname">
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column
                    prop="stuId"
                    label="作业Id"
                    width="150"
                    sortable>
            </el-table-column>
            <el-table-column
                    prop="stuName"
                    label="作业名称"
                    width="120"
                    sortable>
            </el-table-column>
            <el-table-column
                    prop="belong"
                    label="作业日期"
                    sortable>
            </el-table-column>
            <el-table-column
                    prop="gender"
                    label="作业内容"
                    width="120"
                    sortable>
            </el-table-column>
            <el-table-column
                    prop="gender"
                    label="作业内容"
                    width="120"
                    sortable>
            </el-table-column>
        </el-table>
        <div class="fen_ye">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[10, 20, 30, 50]"
                    :page-size="20"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="400">
            </el-pagination>
        </div>
    </div>
</template>
<style>
    .el-table .warning-row {
        background: oldlace;
    }

    .el-table .success-row {
        background: #f0f9eb;
    }
</style>
<style lang="scss" scoped>

    .stu-container {
        .fen_ye{
            text-align: center;
            margin-left: 7px;
            box-shadow: 0 0 9px #999;
        }

        .el-table {
            margin: 5px;
            box-shadow: 0 0 9px #999;
        }

        .stu-btns {
            margin: 0px 5px 5px 5px;
            box-shadow: 0 0 9px #999;
            background-color: #ffffff;
            width: 100%;
            height: 60px;

            .el-form {
                .el-input {
                    width: 260px;
                }
            }

            .op-row {
                padding: 10px;
                display: flex;
                justify-content: space-between;

                .stu-search {
                    .el-input {
                        width: 200px;
                        padding-right: 0px;
                    }

                    .el-select {
                        padding-right: 3px;
                    }
                }

                .ex-in-port {
                    margin-right: 5px;
                }

                .btns {
                    padding-left: 15px;
                }
            }
        }
    }

</style>

<script>
    export default {

        data() {
            return {
                currentPage: 1,
                up: false,
                del: false,
                stuList: [{
                    stuId: '2016207001',
                    stuName: '李祥',
                    belong:'JAVA 4 班',
                    gender:'男',
                    email:'1739781578@qq.com',
                    photo:'17561841398',
                    disc:'本人性格开朗，为人细心，做事一丝不苟，能吃苦耐劳，工作脚踏实地，有较强的责任心，具有团队合作精神，又具有较强的独立工作能力，思维活跃。'
                }, {
                    stuId: '2016207002',
                    stuName: '李成达',
                    belong:'JAVA 4 班',
                    gender:'女',
                    disc:'本人性格开朗，为人细心，做事一丝不苟，能吃苦耐劳，工作脚踏实地，有较强的责任心，具有团队合作精神，又具有较强的独立工作能力，思维活跃。'

                }, {
                    stuId: '2016207003',
                    stuName: '李小龙',
                    belong:'JAVA 2 班',
                    gender:'男'
                }, {
                    stuId: '2016207004',
                    stuName: '李彦宏',
                    belong:'软件外包-JAVA 1 班',
                    gender:'女'
                }, {
                    stuId: '2016207005',
                    stuName: '李白',
                    belong:'JAVA 4 班',
                    gender:'男'
                }, {
                    stuId: '2016207006',
                    stuName: '李商隐',
                    belong:'JAVA 1 班',
                    gender:'男'
                }, {
                    stuId: '2016207007',
                    stuName: '白白',
                    belong:'JAVA 1 班',
                    gender:'女'
                }, {
                    stuId: '2016207008',
                    stuName: '李清照',
                    belong:'JAVA 3 班',
                    gender:'男'
                }, {
                    stuId: '2016207009',
                    stuName: '白居易',
                    belong:'JAVA 4 班',
                    gender:'女'
                }, {
                    stuId: '2016-05-11',
                    stuName: '王小虎1',
                    belong:'JAVA 2 班',
                    gender:'男'
                }, {
                    stuId: '2016-05-12',
                    stuName: '王小虎1',
                    belong:'JAVA 2 班',
                    gender:'男'
                }, {
                    stuId: '2016-05-13',
                    stuName: '王小虎2',
                    belong:'JAVA 2 班',
                    gender:'女'
                }, {
                    stuId: '2016-05-14',
                    stuName: '王小虎3',
                    belong:'JAVA 2 班',
                    gender:'女'
                }],
                multipleSelection1: [],
                vle: 0,
                search: '',
                options: [{
                    value: '1',
                    label: 'Java 1 班'
                }, {
                    value: '2',
                    label: 'Java 2 班'
                }, {
                    value: '3',
                    label: 'Java 3 班'
                }, {
                    value: '4',
                    label: 'Java 4 班'
                }],
                classed: [],
                dialogFormVisible: false,
                up_dialogFormVisible: false,
                tempId:'',
                form: {
                    stuId: '',
                    stuName: '',
                    belong:'',
                    gender:'',
                    email:'',
                    disc:'',
                    photo:''
                },
                formLabelWidth: '120px'
            }
        },
        methods: {
            handleRowChange(row, event, column){
                console.log(row.stuId)
                this.$router.push({ name: "hwinfo", params: { id:row.stuId } });
            },
            handleSizeChange(val) {
                //请求
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                // 请求
                console.log(`当前页: ${val}`);
            },
            toUpdate() {
                if (this.multipleSelection1.length !== 1) {
                    this.$message({
                        type: 'error',
                        message: '每次只能修改一项哦~'
                    });
                } else {
                    this.tempId = this.multipleSelection1[0].stuId
                    this.form = this.multipleSelection1[0];
                    this.up_dialogFormVisible = true
                    console.log(this.multipleSelection1[0].stuName)
                }
            },
            toDel() {
                if (this.multipleSelection1.length > 0) {
                    this.$confirm('此操作将删除该信息, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        var ids = [];
                        this.multipleSelection1.forEach(item => {
                            ids.push(item.stuId)
                        });
                        // console.log(ids.join(","))
                        //删除请求
                        //重新查一遍回显，lastRequest,再发一遍
                        this.stuList.splice()
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        });
                    });

                } else {
                    this.$message({
                        type: 'error',
                        message: '请勾选你需要删除的选项~'
                    });
                }
            },
            commitForm(val) {
                this.options.some(item=>{
                    if(item.value=== this.form.belong){
                        this.form.belong = item.label
                    }
                })
                if (val === 1) {
                    this.dialogFormVisible = false
                    //添加请求
                    //重发上一次的请求，查
                    this.stuList.unshift(this.form)
                    this.$message({
                        type: 'success',
                        message: '添加成功'
                    });
                } else {
                    this.up_dialogFormVisible = false//清空from
                    this.$message({
                        type: 'success',
                        message: '修改成功'
                    });
                }
            },
            getMore() {
                this.pageIndex++;
                // this.getStuList();
            },
            getManagedClass() {
                this.$http
                    .get("api/getManagedClass")
                    .then(result => {
                        if (result.body.status === 0) {
                            // console.log("OK")
                            this.classed = result.body.message;
                        }
                    });
            },
            searchByCondition() {
                // console.log(this.search);
                // console.log(this.classed);
                var idArr = [];
                this.classed.forEach(item => {
                    idArr.push(item)
                })
                console.log(idArr.join(","))

                this.$http
                    .get("api/searchByCondition/" + idArr.join(","))
                    .then(result => {
                        if (result.body.status === 0) {
                            console.log("OK")
                            this.stuList = result.body.message;
                        }
                    });
            },
            getStuList() {
                this.$http
                    .get("api/getStuList?pageIndex=" + this.pageIndex)
                    .then(result => {
                        if (result.body.status === 0) {
                            // console.log("OK")
                            this.stuList = this.stuList.concat(result.body.message);
                        }
                    });
            },
            tableRowClassname({row, rowIndex}) {
                if (rowIndex % 2 === 1) {
                    return 'warning-row';
                } else if (rowIndex % 2 === 0) {
                    return 'success-row';
                }
                return '';
            },
            handleSelectionChange(val) {
                this.multipleSelection1 = val;
                // console.log(this.multipleSelection1.length)
                // if(this.multipleSelection1.length===1){
                //     this.up = false;
                // }else{
                //     this.up = true;
                // }
                // if(this.multipleSelection1.length>0){
                //     this.up = false;
                // }else{
                //     this.up = true;
                // }
            }
        },
        created() {
            // this.getStuList();
            // this.getManagedClass();
        },
        watch: {
            dialogFormVisible: function (newVal, oldVal) {
                // console.log("newVal:" + newVal + "   oldVal:" + oldVal)
                if (!newVal) {
                    // console.log("修改")
                    this.form = {
                        stuId: '',
                        stuName: '',
                        belong:'',
                        gender:''
                    }
                }
            },up_dialogFormVisible:function (newV,oldV) {
                if (!newV) {
                    this.form = {
                        stuId: '',
                        stuName: '',
                        belong:'',
                        gender:''
                    }
                }
            }
        }
    }
</script>

